<template>
<div class="split-wrapper" style="height: calc(100vh - 35px);">
  <tiny-split v-model="split" trigger-simple>
    <template #left>
      <div class="left">
        <slot name="left" />
      </div>
    </template>
    <template #right>
      <slot name="right" />
    </template>
  </tiny-split>
</div>
</template>
<script setup>
import { TinySplit } from '@opentiny/vue'
import {ref, computed} from "vue";
const props = defineProps({
  leftWidth: {type: [Number,String], default: '200'}
})
const split = ref(props.leftWidth+'px')
const leftWidth = computed(() => {
  if(typeof props.width === "string") {
    return props.width
  }
  if(typeof props.width === "number") {
    return props.width + 'px'
  }
  return '100px'
})
</script>
<style scoped lang="scss">
.split-wrapper {
  :deep(.tiny-split-wrapper) {
    border: none;
  }
  width: 100%;
  height: 500px;
  .left {
    width: 100%;
  }
}
</style>